<template>
  <div>
    <el-card class="box-card" shadow="hover">
      <el-button @click="toys">操作按钮</el-button>
      <div ref="ys_chart" style="height: 320px"></div>
    </el-card>


  </div>
</template>


<script>
import * as echarts from "echarts";
import ys from "../detail/ys.vue"
import { ysChartsDaily } from "@/api/ys/ys";

export default {
  name: "yscharts",
  data() {
    return {
      ysData:{
        userId:1,
        days:3
      },
      name: "",
      ys_chart: null,
      ys_chart_option: {
        grid: {
          left: '0%', // 设置图表距离容器左侧的距离
          top:"30%",
          bottom:"1%",
          containLabel: true // 保证标签不会被裁剪或溢出
        },
        color: ['rgba(253, 136, 0, 0.77)'], // 自定义柱状图和折线图的颜色
        title: {
          text: '马洪哲的饮水量统计'
        },
        tooltip: {},
        legend: {
          data: ['今日','三天','七天']
        },
        xAxis: {
          data: [],
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 使用箭头
            symbolSize: [5, 10] // 箭头大小
          }
        },
        yAxis: {
          name: '饮水量 (ml)',
          type: 'value',
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 使用箭头
            symbolSize: [5, 10] // 箭头大小
          },
          axisLabel: {
            formatter: '{value} ml'
          },
          splitLine: {
            lineStyle: {
              color: '#e7e7e7'
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
            }
          }
        },
        series: [{
          name: '今日',
          type: 'bar',
          data: [],
          tooltip: {
            valueFormatter: function (value) {
              return value + ' ml';
            }
          },
        },
        
        ]

      }
    }
  },
  created() {
    this.get_ys_chart()
  },
  methods: {
    //前往饮水数据详情
    toys(){
      alert(1)
      this.$router.push('/ys/ys/index');
    },
    get_ys_chart() {
      this.$nextTick(() => {
        this.ys_chart = echarts.init(this.$refs.ys_chart, "macarons");
        this.ys_chart.setOption(this.ys_chart_option)
        window.addEventListener("resize", () => {
          this.ys_chart.resize();
        });
      })
    },
    //获取图表信息
    getData(){
      ysChartsDaily(this.ysData).then(res =>{
        console.log(res)
      })
    }
  },
  mounted(){
    this.getData()
  }
}
</script>


<style scoped lang="scss">

</style>
